<template>
  <div class="carbonQuota">
    <!-- 资金管理   -->
    <a-row class="Quotas">
      <a-col :md="18">
        <p class="title">资金管理</p>
        <div class="text">
          企业资金是企业碳资产的重要组成部分，碳配额通过交易市场出售可以转化为资金，资金也可用于购置碳资产。
        </div>
      </a-col>
      <a-col :md="6">
        <img src="@/assets/img/assets/bg_4.png" />
      </a-col>
    </a-row>
    <ul class="tab">
      <li @click="changeActiveIdx(1)" :class="[idx == 1 ? 'active' : '']">资金总览</li>
      <li @click="changeActiveIdx(2)" :class="[idx == 2 ? 'active' : '']">资金流水</li>
    </ul>
    <!-- 资金总览 -->
    <capitalOverview v-if="idx == 1"></capitalOverview>
    <!-- 资金流水 -->
    <journalAccount  v-if="idx == 2"></journalAccount>

    
  </div>
</template>

<script>

import capitalOverview from '@/components/Assets/Funds/capitalOverview'
import journalAccount from '@/components/Assets/Funds/journalAccount'
export default {
  components: {
    capitalOverview,
    journalAccount
  },
  data() {
    return {
     
      idx: 1,
      description: '统计页面',
      height: 300,
      columns: [
        {
          title: '时间周期',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '碳余额(吨)',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '最高价(元/吨)',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '最高资产净值(元)',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '均价资产净值(元)',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '收盘碳价(元/吨)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '变动金额(元)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '资产净值(元)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
      columns1: [
        {
          title: '配额/CCER编号',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '履约类型',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '履约数量tCO₂e',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '履约产品',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '归属交易所',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '归属组织',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '变更时间',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '记录时间',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
    }
  },
  created() {
   
  },
  methods: {

    changeActiveIdx(idx) {
      this.idx = idx
    },
 
  },
}
</script>

<style lang="scss" scoped>
.carbonQuota {
  background: #fff;
  padding: 20px;
  background-size: cover;
  .Quotas {
    padding: 20px 20px 0 20px;
    background: linear-gradient(231deg, #ddf3fb, #eefaff);
    border-radius: 6px;
    .title {
      font-size: 16px;
    }
    .text {
      font-size: 12px;
    }
    img {
      width: 80%;
    }
  }
  .tab {
    display: flex;
    margin: 20px 0;
    flex-direction: row;
    padding: 0;
    li {
      list-style: none;
      padding: 6px 14px;
      font-size: 12px;
      margin-right: 6px;
      // background: #0c67ee;
      border-radius: 20px;
      color: #333;
      cursor: pointer;
    }
  }
  .module {
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
  }

  .flex_ {
    display: flex;
    width: fit-content;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    .title {
      color: #999;
      margin-right: 10px;
    }
    .select {
      color: #000;
      margin-right: 4px;
    }
    i {
      color: #000;
    }
  }
}
.active {
  list-style: none;
  padding: 6px 14px;
  font-size: 12px;
  margin-right: 6px;
  background: #0c67ee;
  border-radius: 20px;
  color: #fff !important;
}
</style>